<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex教程</title>
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/index.css">
</head>

<body>
    <h1>flex教程</h1>
    <section>
        <h3 class="header-a">flex-direction</h3>
        <div class="header-b">决定主轴的方向（即项目的排列方向）</div>
        <div class="header-c">演示区域</div>
        <ol class="body">
            <li class="body-1">
                <div class="body-left">
                    <div class="body-left-1">row</div>
                    <div>(默认值），主轴为水平方向，起点在左端</div>
                </div>
                <div class="body-1-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-2">
                <div class="body-left">
                    <div class="body-left-1">row-reverse</div>
                    <div>主轴为水平方向，起点在右端</div>
                </div>
                <div class="body-2-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-3">
                <div class="body-left">
                    <div class="body-left-1">column</div>
                    <div>主轴为垂直方向，起点在上沿</div>
                </div>
                <div class="body-3-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-4">
                <div class="body-left">
                    <div class="body-left-1">column-reverse</div>
                    <div>主轴为垂直方向，起点在下沿</div>
                </div>
                <div class="body-4-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
        </ol>
    </section>
    <section>
        <h3 class="header-a">flex-wrap</h3>
        <div class="header-b">定义如果一条轴线排不下，如何换行</div>
        <div class="header-c">演示区域</div>
        <ol class="body">
            <li class="body-5">
                <div class="body-left">
                    <div class="body-left-1">nowap</div>
                    <div>(默认值），不换行</div>
                </div>
                <div class="body-5-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>
                    <div> 因为不换行导致元素块挤在第一行，每个块宽度变窄</div>

                </div>
            </li>
            <li class="body-6">
                <div class="body-left">
                    <div class="body-left-1">wrap</div>
                    <div>换行，第一行在上方</div>
                </div>
                <div class="body-6-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>
                </div>
            </li>
            <li class="body-7">
                <div class="body-left">
                    <div class="body-left-1">wrap-reverse</div>
                    <div>换行，第一行在下方</div>
                </div>
                <div class="body-7-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>
                </div>
            </li>
        </ol>
    </section>
    <section>
        <h3 class="header-a">flex-flow</h3>
        <div class="header-b">flex-direction属性和flex-wrap属性的简写形式</div>
        <div class="header-c">演示区域</div>
        <ol class="body">
            <li class="body-8">
                <div class="body-left">
                    <div class="body-left-1">row nowrap</div>
                    <div>(默认值），主轴为水平方向，起点在左端；不换行</div>
                </div>
                <div class="body-8-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>
                </div>
            </li>
        </ol>
    </section>

    <section>
        <h3 class="header-a">justify-content</h3>
        <div class="header-b">定义了项目在主轴上的对齐方式</div>
        <div class="header-c">演示区域</div>
        <ol class="body">
            <li class="body-9">
                <div class="body-left">
                    <div class="body-left-1">flex-start</div>
                    <div>(默认值），左对齐</div>
                </div>
                <div class="body-9-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-10">
                <div class="body-left">
                    <div class="body-left-1">flex-end</div>
                    <div>右对齐</div>
                </div>
                <div class="body-10-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-11">
                <div class="body-left">
                    <div class="body-left-1">center</div>
                    <div>居中</div>
                </div>
                <div class="body-11-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-12">
                <div class="body-left">
                    <div class="body-left-1">space-between</div>
                    <div>两端对齐，项目之间的间隔都相等</div>
                </div>
                <div class="body-12-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-13">
                <div class="body-left">
                    <div class="body-left-1">space-around</div>
                    <div>每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍</div>
                </div>
                <div class="body-13-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
        </ol>
    </section>
    <section>
        <h3 class="header-a">align-items</h3>
        <div class="header-b">定义项目在交叉轴上如何对齐</div>
        <div class="header-c">演示区域</div>
        <ol class="body">
            <li class="body-14">
                <div class="body-left">
                    <div class="body-left-1">flex-start</div>
                    <div>交叉轴的起点对齐</div>
                </div>
                <div class="body-14-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-15">
                <div class="body-left">
                    <div class="body-left-1">flex-end</div>
                    <div>交叉轴的终点对齐</div>
                </div>
                <div class="body-15-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-16">
                <div class="body-left">
                    <div class="body-left-1">center</div>
                    <div>交叉轴的中点对齐</div>
                </div>
                <div class="body-16-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
            <li class="body-17">
                <div class="body-left">
                    <div class="body-left-1">baseline</div>
                    <div>项目的第一行文字的基线对齐</div>
                </div>
                <div class="body-17-right test">
                    <div class="body-box-1">baseline</div>
                    <div class="body-box-2">baseline</div>
                    <div class="body-box-3">baseline</div>
                </div>
            </li>
            <li class="body-18">
                <div class="body-left">
                    <div class="body-left-1">stretch</div>
                    <div>（默认值），如果项目未设置高度或设为auto，将占满整个容器的高度</div>
                </div>
                <div class="body-18-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
        </ol>
    </section>
    <section>
        <h3 class="header-a">align-content</h3>
        <div class="header-b">定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用</div>
        <div class="header-c">演示区域</div>
        <ol class="body">
            <li class="body-19">
                <div class="body-left">
                    <div class="body-left-1">flex-start</div>
                    <div>与交叉轴的起点对齐</div>
                </div>
                <div class="body-19-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>
                </div>
            </li>
            <li class="body-20">
                <div class="body-left">
                    <div class="body-left-1">flex-end</div>
                    <div>与交叉轴的终点对齐</div>
                </div>
                <div class="body-20-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>
                </div>
            </li>
            <li class="body-21">
                <div class="body-left">
                    <div class="body-left-1">center</div>
                    <div>与交叉轴的中点对齐</div>
                </div>
                <div class="body-21-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>
                </div>
            </li>
            <li class="body-22">
                <div class="body-left">
                    <div class="body-left-1">space-between</div>
                    <div>与交叉轴两端对齐，轴线之间的间隔平均分布</div>
                </div>
                <div class="body-22-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>
                </div>
            </li>
            <li class="body-23">
                <div class="body-left">
                    <div class="body-left-1">space-around</div>
                    <div>每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍</div>
                </div>
                <div class="body-23-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                    <div class="body-box-4"></div>
                    <div class="body-box-5"></div>
                    <div class="body-box-6"></div>

                </div>
            </li>
            <li class="body-24">
                <div class="body-left">
                    <div class="body-left-1">stretch</div>
                    <div>（默认值），轴线占满整个交叉轴</div>
                </div>
                <div class="body-24-right test">
                    <div class="body-box-1"></div>
                    <div class="body-box-2"></div>
                    <div class="body-box-3"></div>
                </div>
            </li>
        </ol>
    </section>

</body>

</html>